<template>
	<view :class="vuex_theme">
		<!-- 导航栏 -->
		<m-navbar title="我的地址">
		</m-navbar>
		
		<m-load-modal :show="showLoad"></m-load-modal>
		<!-- 内容 -->
		<view class="cu-card padding-bottom-xxl">
			<view class="cu-item shadow-warp margin-sm radius " v-for="(item, index) in address.list" :key="index">
				<view class="flex">
					<view class="padding-sm " style="flex: 4;">
						<view class="flex text-bold align-center">
							<view class=" text-xl text-cut" style="width: 200rpx;">{{item.name}}</view>
							<view class="" style="display: inherit;">
								<view>
									<text class="margin-left-sm">
										{{item.mobile}}
									</text>
								</view>
								<view class="margin-left cu-tag main-bg round sm " v-if="item.default">
									<text class='text-sm' >默认</text>
								</view>

							</view>
						</view>
						<view class="text-sm " style="width: 500rpx;">
							<view class="text-cut">{{item.province+item.city+item.area}}</view>
							<view class="text-cut">{{item.details}}</view>
						</view>
						
					</view>
					<view class="flex-sub radius">
						<view class="grid col-1 main-bg" style="border-top-right-radius: 8rpx;" @click="edit(index)">
							<view class="text-center margin-sm ">
								<text class="cuIcon-edit"></text>
							</view>
						</view>
						<view class="grid col-1 bg-red" style="border-bottom-right-radius: 8rpx;" @click="del(index)">
							<view class="text-center margin-sm">
								<text class="cuIcon-delete"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-group padding text-center ">
				<button class="cu-btn main-bg margin-lr-sm round lg" @click="add()">
					<text class="text">添加新的地址</text>
				</button>
			</view>
		</view>
		
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLoad: true,
				loadStatus: 'nomore',
				scrollTop: 0,
				address: {
					total: 0,
					list: []
				}

			}
		},
		onShow() {
			
			//#ifdef APP-VUE
			// 初始化导航状态栏颜色
			this.$common.initBarColor();
			//#endif
			
			this.$u.post('address/getList', {}).then(res => {
				if (res.list) {
					this.address.list = res.list;
					this.address.total = res.total;
				}
				this.showLoad = false;
			});
		},
		methods: {
			edit(index) {
				this.$u.route({
					url: '/pages/user/address/edit',
					params: this.address.list[index]
				})
			},
			add() {
				if (this.address.total < 10) {
					this.$u.route({
						url: '/pages/user/address/add'
					})
				} else {
					this.$common.showToast('地址以达到上线了哦')
				}

			},
			del(index) {
				this.$u.throttle(() => {
					this.showLoad = true;
					let id = this.address.list[index].id;
					let de = this.address.list[index].default;
					this.$u.post('address/getList', {
						id: id,
					}).then(res => {
						this.showLoad = false;
						if (res.code) {
							this.address.total--;
							this.address.list.splice(index, 1);
							if (this.address.list.length) {
								if (de) {
									this.address.list[0].default = 1;
								}
							}
							this.$common.showToast('删除成功')
						}
					});
				}, 500)
			}
		}
	}
</script>

<style lang="scss">
	@import '@/moyi-ui/form.scss';

</style>
